<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
          <router-link to="/talent" class="flex items-center text-gray-600 hover:text-primary">
            <i class="ri-arrow-left-line mr-2"></i>
            <span>返回人才库</span>
          </router-link>
        </div>
        <div class="text-xl font-bold text-gray-800">候选人详情</div>
        <div class="flex items-center space-x-3">
          <button @click="downloadResume" class="flex items-center text-gray-600 hover:text-primary">
            <i class="ri-download-line mr-1"></i>
            <span>下载简历</span>
          </button>
          <button @click="toggleFavorite" class="flex items-center text-gray-600 hover:text-primary">
            <i :class="isFavorited ? 'ri-star-fill text-yellow-500' : 'ri-star-line'" class="mr-1"></i>
            <span>{{ isFavorited ? '已收藏' : '收藏' }}</span>
          </button>
        </div>
      </div>
    </header>

    <div v-if="candidate" class="container mx-auto px-4 py-6">
      <!-- 基本信息卡片 -->
      <div class="bg-white rounded shadow-sm p-6 mb-6">
        <div class="flex flex-wrap">
          <!-- 左侧个人信息 -->
          <div class="w-full lg:w-2/3 flex">
            <div class="w-24 h-24 rounded-full overflow-hidden mr-6 flex-shrink-0">
              <img :src="candidate.avatar" :alt="candidate.name" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <div class="flex items-center mb-2">
                <h1 class="text-2xl font-bold text-gray-800 mr-3">{{ candidate.name }}</h1>
                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">活跃中</span>
              </div>
              <div class="flex flex-wrap items-center text-sm text-gray-500 mb-4 gap-x-3 gap-y-1">
                <span>{{ candidate.age }}岁</span>
                <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
                <span>{{ candidate.gender }}</span>
                <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
                <span>{{ candidate.experience }}</span>
                <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
                <span>{{ candidate.education }}</span>
                <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
                <span>{{ candidate.university }}</span>
              </div>
              
              <CandidateBasicInfo :candidate="candidate" />
              
              <div class="flex items-center space-x-4 mt-4">
                <div class="flex items-center text-sm text-gray-500">
                  <i class="ri-phone-line mr-1 text-gray-400"></i>
                  <span>{{ candidate.phone }}</span>
                  <button class="ml-1 text-primary">查看</button>
                </div>
                <div class="flex items-center text-sm text-gray-500">
                  <i class="ri-mail-line mr-1 text-gray-400"></i>
                  <span>{{ candidate.email }}</span>
                  <button class="ml-1 text-primary">查看</button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 右侧求职意向 -->
          <div class="w-full lg:w-1/3 mt-6 lg:mt-0 lg:pl-6 lg:border-l lg:border-gray-100">
            <h3 class="text-lg font-medium text-gray-800 mb-3">求职意向</h3>
            <div class="space-y-3">
              <div class="flex items-start">
                <i class="ri-briefcase-line text-gray-400 mr-2 mt-0.5"></i>
                <div>
                  <div class="text-xs text-gray-500">期望职位</div>
                  <div class="text-sm text-gray-700">{{ candidate.expectedPosition }}</div>
                </div>
              </div>
              <div class="flex items-start">
                <i class="ri-map-pin-line text-gray-400 mr-2 mt-0.5"></i>
                <div>
                  <div class="text-xs text-gray-500">期望城市</div>
                  <div class="text-sm text-gray-700">{{ candidate.expectedLocation }}</div>
                </div>
              </div>
              <div class="flex items-start">
                <i class="ri-building-line text-gray-400 mr-2 mt-0.5"></i>
                <div>
                  <div class="text-xs text-gray-500">期望行业</div>
                  <div class="text-sm text-gray-700">{{ candidate.expectedIndustry }}</div>
                </div>
              </div>
            </div>
            <button 
              @click="sendInterviewInvitation"
              class="mt-6 w-full bg-primary text-white py-2.5 px-4 rounded flex items-center justify-center hover:bg-primary/90"
            >
              <i class="ri-send-plane-line mr-2"></i>
              <span>发送面试邀请</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 详细信息区域 -->
      <div class="bg-white rounded shadow-sm p-6">
        <!-- 导航锚点 -->
        <div class="flex border-b border-gray-200 mb-6 overflow-x-auto whitespace-nowrap">
          <button 
            v-for="section in sections"
            :key="section.key"
            @click="activeSection = section.key"
            :class="[
              'px-4 py-2 hover:text-primary',
              activeSection === section.key ? 'text-primary border-b-2 border-primary' : 'text-gray-500'
            ]"
          >
            {{ section.label }}
          </button>
        </div>

        <!-- 内容区域 -->
        <div class="min-h-[400px]">
          <CandidateProfile v-if="activeSection === 'profile'" :candidate="candidate" />
          <CandidateExperience v-if="activeSection === 'experience'" :candidate="candidate" />
          <CandidateEducation v-if="activeSection === 'education'" :candidate="candidate" />
          <CandidateProjects v-if="activeSection === 'projects'" :candidate="candidate" />
          <CandidateSkills v-if="activeSection === 'skills'" :candidate="candidate" />
          <CandidateEvaluation v-if="activeSection === 'evaluation'" :candidate="candidate" />
        </div>
      </div>

      <!-- 相似候选人推荐 -->
      <SimilarCandidates :current-candidate-id="candidate.id" />
    </div>
    
    <div v-else class="container mx-auto px-4 py-6">
      <div class="text-center text-gray-500">候选人信息不存在</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useCandidatesStore } from '../stores/candidates'
import CandidateBasicInfo from '../components/CandidateBasicInfo.vue'
import CandidateProfile from '../components/CandidateProfile.vue'
import CandidateExperience from '../components/CandidateExperience.vue'
import CandidateEducation from '../components/CandidateEducation.vue'
import CandidateProjects from '../components/CandidateProjects.vue'
import CandidateSkills from '../components/CandidateSkills.vue'
import CandidateEvaluation from '../components/CandidateEvaluation.vue'
import SimilarCandidates from '../components/SimilarCandidates.vue'

const route = useRoute()
const candidatesStore = useCandidatesStore()

const activeSection = ref('profile')
const isFavorited = ref(false)

const sections = [
  { key: 'profile', label: '个人简介' },
  { key: 'experience', label: '工作经历' },
  { key: 'education', label: '教育背景' },
  { key: 'projects', label: '项目经验' },
  { key: 'skills', label: '技能特长' },
  { key: 'evaluation', label: '自我评价' }
]

const candidate = computed(() => {
  const id = route.params.id as string
  return candidatesStore.getCandidateById(id)
})

const toggleFavorite = () => {
  isFavorited.value = !isFavorited.value
}

const downloadResume = () => {
  alert('简历下载中，请稍候...')
  setTimeout(() => {
    alert('简历下载完成！')
  }, 1500)
}

const sendInterviewInvitation = () => {
  alert('面试邀请已发送！')
}

onMounted(() => {
  // 滚动到锚点的逻辑
  const handleScroll = () => {
    // 实现滚动监听逻辑
  }
  
  window.addEventListener('scroll', handleScroll)
})

</script>
